<template>
	<view class="content" id="content3">
		<view class="mainact" :style="{height:height}">
			<view class="name">
				{{name}}躺平姿势是
			</view>
			<image :src=url mode="widthFix" ref="realbgs" id="realbg"></image>
			<canvas canvas-id="canvas" ref="canvas" id="canvas" style="width: 100%;height: 100%;" />
			<canvas canvas-id="qrcode" id="qrcode" style="width: 80px; height: 80px" />
		</view>
		<view class="btns" id="btnx">
			<image src="https://sino-seo.oss-cn-beijing.aliyuncs.com/h5/2/img/share.png" class="sharebtn" @click="share" mode="widthFix"></image>
			<image src="https://sino-seo.oss-cn-beijing.aliyuncs.com/h5/2/img/save.png" v-longpress="handleLongClick" mode="widthFix"></image>
		</view>
		<image :src=urls mode="widthFix" class="savabg"></image>
		<image class="stopmusic" @click="stopmusic" id="stop"
			src="https://sino-seo.oss-cn-beijing.aliyuncs.com/h5/1/icon-muisc.png"  >
		</image>
	</view>
</template>

<script>
	import DrawPoster from '@/js_sdk/u-draw-poster'
	import {
		drawQrCode
	} from "@/js_sdk/u-draw-poster";
	DrawPoster.useCtx(drawQrCode);
	import wx from '../../weixin-js-sdk'
	import {
		getshareinfo
	} from '../../tools/api.js'
	import music from '../../tools/music.js'
	export default {
		data() {
			return {
				musicshow: true,
				url: 'https://sino-seo.oss-cn-beijing.aliyuncs.com/h5/2/img/a.png',
				urls: 'https://sino-seo.oss-cn-beijing.aliyuncs.com/h5/2/img/a1.png', // 要保存的海报图片地址
				coverurl: '',
				grade: 'a',
				name: uni.getStorageSync('name'),
				codeurl: '',
				canvashow: true,
				height: ''
			};
		},
		onLoad(e) {
			console.log(e.grade)
			this.musicshow = uni.getStorageSync('musicplay')
			this.grade = e.grade
			this.url = 'https://sino-seo.oss-cn-beijing.aliyuncs.com/h5/2/img/' + e.grade + '.png'
			this.urls = 'https://sino-seo.oss-cn-beijing.aliyuncs.com/h5/2/img/' + e.grade + '1.png'
			this.coverurl = '../../static/img/' + e.grade + '1.png'
		},
		created() {
			uni.showLoading({
				title:'加载中'
			})
			this.$nextTick(function(){
				setTimeout(()=>{
					uni.hideLoading()
				},300)
			})
		},
		async onReady() {
			const that = this
			setTimeout(async () => {
				// 二维码绘制
				// 创建绘制工具
				const dp1 = await DrawPoster.build("qrcode");
				const w1 = (dp1.canvas.width = 80);
				const h1 = (dp1.canvas.height = 80);
				// 创建一个绘制任务
				dp1.draw(async (ctx) => {
					ctx.fillStyle = "#fff";
					ctx.fillRect(0, 0, w1, h1);
					// 绘制二维码
					ctx.drawQrCode({
						x: 0,
						y: 0,
						text: location.href.split('#')[0],
						size: 80,
					});
				});
				this.codeurl = await dp1.createImagePath();
				// 海报的绘制
				// 传入选择器, 初始化绘制工具(注意, 不需要传入#符号) 当微信小程序时, 将自动启用type2d绘制
				const dp = await DrawPoster.build({
					selector: 'canvas',
					loading: true,
					debugging: true,
				});
				console.log(document.getElementById('canvas').offsetWidth)
				const w = (dp.canvas.width = document.getElementById('canvas').offsetWidth);
				const h = (dp.canvas.height = Math.ceil((document.getElementById('canvas').offsetWidth *
					1920) / 1080));
				console.log(w, h)
				// 绘制基本背景
				dp.draw((ctx) => {
					ctx.fillStyle = '#000000';
					ctx.fillRect(0, 0, w, h);
					console.log(w, h)
				});
				// 绘制图片内容
				dp.draw(async (ctx) => {
					await Promise.all([
						ctx.drawImage(that.coverurl, 0, 0, w, h),
					]);
				});
				dp.draw(async (ctx) => {
					await Promise.all([
						ctx.drawImage(that.codeurl, w - 92, h - 186.5, w1, h1),
					]);
				});
				// 绘制中间文字内容
				dp.draw((ctx) => {
					ctx.fillStyle = '#7FF5D5';
					ctx.font = 'bold 18px HappyZcool';
					ctx.fillText(`${that.name}  躺平姿势是`, 10, 25);
				});
				var base64Image = await dp.createImagePath();
				var imgData = base64Image.replace(/[\r\n]/g, '') // 将回车换行换为空字符''
				this.urls = imgData
				this.saveimg()
			}, 1000)
		},
		async mounted() {
			console.log()
			if(this.musicshow){
				document.getElementById('stop').style.animationPlayState='paused'
				// console.log(12313213)
			}
			const bool = /iphone/gi.test(navigator.userAgent) && (screen.height == 812 && screen.width == 375)
			if (bool) {
				document.getElementById('btnx').style.bottom = '15%'
			}
			document.getElementById('content3').style.backgroundImage =
				'url(https://sino-sources.com/test2/static/img/bg' +
				this.grade + '.png'
			this.height = (document.body.clientWidth * 1920) / 1080 + 'px'
			var url = location.href.split('#')[0]
			const res = await getshareinfo(url)
			const appId = 'wx81cca98415403b17'
			wx.config({
				debug: false,
				appId: appId,
				timestamp: res.timestamp,
				nonceStr: res.nonceStr,
				signature: res.signature,
				jsApiList: [
					// 需要使用的JS接口列表,分享默认这几个，如果有其他的功能比如图片上传之类的，需要添加对应api进来
					'checkJsApi',
					'onMenuShareTimeline',
					'onMenuShareAppMessage',
					'onMenuShareQQ',
					'onMenuShareWeibo',
					'onMenuShareQZone',
					'hideMenuItems',
					'showMenuItems',
					'hideAllNonBaseMenuItem',
					'showAllNonBaseMenuItem',
					'updateAppMessageShareData',
					'updateTimelineShareData'
				]
			})
			const shareconfig = {
				share: {
					imgUrl: 'https://sino-sources.com/test2/static/front.png',
					desc: `有一种哲学叫做“躺平学”,有一种青年自称“ 躺平青年”,快来围观你的躺平姿势!`, // 摘要,如果分享到朋友圈的话，不显示摘要。
					title: '扶起躺平的你 ', // 分享卡片标题
					link: url, // 分享出去后的链接，这里可以将链接设置为另一个页面。
					success: function(e) {
						// 分享成功后的回调函数
					},
					cancel: function(e) {
						// 用户取消分享后执行的回调函数
					}
				}
			}
			wx.ready(function() {
				wx.onMenuShareAppMessage(shareconfig.share) // 分享给好友
				wx.onMenuShareTimeline(shareconfig.share) // 分享到朋友圈
				wx.onMenuShareQQ(shareconfig.share) // 分享给手机QQ
			})
		},
		methods: {
			stopmusic() {
				this.musicshow = !this.musicshow
				if(this.musicshow){
					document.getElementById('stop').style.animationPlayState='paused'
				}else{
					document.getElementById('stop').style.animationPlayState='running'
				}
				uni.setStorageSync('musicplay', this.musicshow)
				console.log(this.musicshow)
				music.playBgm({
					mute: this.musicshow
				})
			},
			handleLongClick(e) {
				console.log('changan')
				const that = this
			},
			share() {
				// this.showmask = !this.showmask
				uni.showModal({
					title: '提示',
					content: '点击右上角可分享给好友或朋友圈哦',
					showCancel: false,
					confirmText: '我知道了',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			saveimg() {}
		}
	}
</script>

<style lang="scss">
	@keyframes rotatelogo {
		0% {
			transform: rotateZZ(0);
		}
	
		25% {
			transform: rotateZ(90deg);
		}
	
		50% {
			transform: rotateZ(180deg);
		}
	
		75% {
			transform: rotateZ(270deg);
		}
	
		100% {
			transform: rotateZ(360deg);
		}
	}
	
	@-webkit-keyframes rotatelogo {
		0% {
			transform: rotateZ(0);
		}
	
		25% {
			transform: rotateZ(90deg);
		}
	
		50% {
			transform: rotateZ(180deg);
		}
	
		75% {
			transform: rotateZ(270deg);
		}
	
		100% {
			transform: rotateZ(360deg);
		}
	}
	.content {
		width: 100%;
		background: url(https://sino-seo.oss-cn-beijing.aliyuncs.com/h5/2/img/bga.png) 0 0 no-repeat;
		background-size: 100vw 100vh;
		background-color: #4F00FC;
		min-height: 102vh;
		padding-top: 5%;

		.mainact {
			width: 100%;
			position: relative;
		}

		.stopmusic {
			width: 3em;
			height: 3em;
			position: absolute;
			right: 2%;
			top: 10%;
			animation: rotatelogo 3s linear infinite;
			z-index: 999;
		}

		image {
			width: 100%;
		}

		.name {
			position: absolute;
			top: 0%;
			left: 3%;
			font-size: 20px;
			font-family: HappyZcool;
			font-weight: normal;
			color: #7FF5D5;
			z-index: 10000;
		}

		.savabg {
			width: 100%;
			position: absolute;
			bottom: 0;
			left: 0;
			opacity: 0;
			z-index: 3;
		}

		#canvas {
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
			opacity: 0;
		}

		#qrcode {
			width: 100px;
			height: 100px;
			position: absolute;
			top: 100px;
			left: 0;
			opacity: 0;
		}

		.btns {
			width: 100%;
			position: absolute;
			bottom: 0%;
			left: 0;
			display: flex;
			justify-content: space-around;

			image {
				width: 40%;
			}

			.sharebtn {
				z-index: 1000;
			}
		}

		.mask {
			width: 100vw;
			height: 100vh;
			background-color: rgba(1, 1, 1, 0.5);
			position: fixed;
			left: 0;
			top: 0;
		}
	}
</style>
